<template>
  <div class="songlistitem" v-show="musicList">
      <p v-for="item in musicList" :key="item.id" @click="$emit('play', item)">
        <span>{{ item.name }}</span>

        <span v-if="item.alg&&item.song.duration" class="timeshow">{{
          item.song.duration | changetime
        }}</span>

        <span v-show="item.dt" class="timeshow">{{
          item.dt | changetime
        }}</span>

        <span v-show="item.duration" class="timeshow">{{
          item.duration | changetime
        }}</span>

      </p>
  </div>
</template>

<script>
// play页面的音乐列表
export default {
  name: "SongListItem",
  props: {
    musicList: Array,
  },
  data() {
    return {};
  },
  filters: {
    changetime(val) {
      return (val / 1000 / 60).toFixed(2).replace(".", ":");
      //   console.log(val);
    },
  }
};
</script>
<style lang="less" scoped>
.songlistitem {
  background-color: white;
  width: 100vw;
  color: black;
  padding: 0px 15px;
  box-sizing: border-box;
  //   position: relative;
  p {
    font-size: 15px;
    padding: 10px 0px;
    position: relative;
    padding-left: 28px;
    color: #4e4e4e;
    span.timeshow {
      float: right;
    }
  }
  p::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 10px;
    background-image: url("../assets/music.png");
    height: 20px;
    width: 20px;
    background-size: 20px;
  }
}
// .songlistitem::before, .songlistitem::after{
//     content: "";
//     position: absolute;
//     // left: 0px;
//     top: 0px;
//     height: 30px;
//     width: 40px;
//     border: 4px solid #8ac4d0;
//     border-bottom: 0px;
// }
// .songlistitem::before{
//     left: 0px;
//     border-right: 0px;
// }
// .songlistitem::after{
//     right: 0px;
//     border-left: 0px;
// }
</style>